<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
    <style>
        h1{
            text-align: center;
        }
        table{
            margin-top: 100px;
        }
        img:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>学生管理系统</h1>
    <table align="center" >
        <tr>
            <td>用户名</td>
            <td><input name="username" type="text"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input name="password" type="password"></td>
        </tr>
        <tr>
            <td><input name="capthca" type="text" placeholder="请输入验证码,区分大小写"></td>
            <td><img src="${pageContext.request.contextPath}/captcha" onclick="refreshCode(this)"></td>
        </tr>
        <tr>
            <td>
                <button id="sub">登录</button>
            </td>
            <td>
                <button><a href="register.jsp" style="text-decoration: none;color: black">注册</a></button>
            </td>
        </tr>
    </table>
</body>
<script>
    $(function () {
        //当点击提交时
        $("#sub").on("click", function () {
            let username = $("input[name=username]").val()
            let password = $("input[name=password]").val()
            let captcha = $("input[name=capthca]").val()
            let data = {username:username,password:password,captcha:captcha}
            //进行ajax提交
            $.ajax({
                url:baseUrl+"/ajax_login",
                type:"post",
                contentType:"application/json",
                dataType:"json",
                data:JSON.stringify(data),
                success:function (data){
                    console.log(data)
                    if(data.code==200){
                        alert("登录成功")
                        window.location.href="index.jsp"
                    }else{
                        alert(data.msg)
                    }
                },
                error:function (e){
                    console.log(e)
                }
            })

        })
    })
    function refreshCode(e){
        e.src = "${pageContext.request.contextPath}/captcha?time=" + new Date().getTime()
    }
</script>
</html>